import 'package:flutter/material.dart';
import 'package:flutter_enjoy_plus_01/utils/TokenManager.dart';

import 'home/index.dart';
import 'mine/index.dart';

class TabsPage extends StatefulWidget {
  const TabsPage({super.key});
  @override
  _TabsPageState createState() => _TabsPageState();

  // 页面一加载就初始化token
  @override
  void initState() {
    // TODO: implement initState
    // super.initState();
    // 初始化token
    tokenManager.init();
  }
}


class _TabsPageState extends State<TabsPage> {
  

  // 提供底部导航栏数据
  final List _tabbarList = [
    {
      'label': '首页',
      'icon': 'assets/tabs/home_default.png',
      'activeIcon': 'assets/tabs/home_active.png',
    },
    {
      'label': '我的',
      'icon': 'assets/tabs/my_default.png',
      'activeIcon': 'assets/tabs/my_active.png',
    }
  ];

  // 当前选中的tabbar索引
   int _currentIndex = 0;
  
  //  获取底部导航栏数据
  List<BottomNavigationBarItem> getBottomNavigationBarItems(){
    List<BottomNavigationBarItem> list = [];
     for(var item in _tabbarList){
        list.add(
          BottomNavigationBarItem(
          icon: Image.asset(item['icon'], width: 30, height: 30,),
          activeIcon: Image.asset(item['activeIcon'], width: 30, height: 30,),
          label: item['label']
        )
        );
     }

     return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 使用 SafeArea 确保内容不被系统状态栏、刘海(安全区)等遮挡
      body: SafeArea(
        // 使用 IndexedStack 来管理页面切换，只显示当前索引对应的子部件
        child: IndexedStack(
          // 当前显示的子部件索引，与底部导航栏同步
          index: _currentIndex,
          // 子部件列表 需要显示的页面列表
          children: const [
              HomePage(),  // 首页 页面
              MinePage(),  // 我的 页面
          ]
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        // 底部导航栏类型
        type: BottomNavigationBarType.fixed,
        // 底部当前选中的导航项索引
        currentIndex: _currentIndex,
        // 底部导航项列表，通过 getBottomNavigationBarItems 方法获取
        items: getBottomNavigationBarItems(),
        // 底部导航栏选中颜色
        selectedItemColor: const Color.fromARGB(255, 85, 145, 175),
        // 底部导航栏未选中颜色
        unselectedItemColor: Colors.black,
        onTap: ( int index) {
           // 更新状态，触发界面刷新
          setState(() {
            // 将当前索引更新为用户点击的导航项的索引
            _currentIndex = index;
          });
        })
    );
  }
}
